<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style">
      <el-row class="py-20">
        <el-col :span="6">
          <el-form ref="form" :model="waterform" label-width="120px">
            <el-form-item label="水表供应商">
              <el-input v-model="waterform.waterSupplier" :readonly="isReadonly"></el-input>
            </el-form-item>
            <el-form-item label="水表型号">
              <el-input v-model="waterform.waterModel" :readonly="isReadonly"></el-input>
            </el-form-item>

            <el-form-item label="水表类型">
              <el-select v-model="waterform.waterTypeName" placeholder="请选择水表类型" :disabled="isReadonly">
                <el-option label="机械水表" value="机械水表"> </el-option>
                <el-option label="智能水表" value="智能水表"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最大计量">
              <el-input type="text" v-model="waterform.waterMaxMeter" :readonly="isReadonly">
                <template #append> 吨 </template>
              </el-input>
            </el-form-item>
            <el-form-item label="水表管径">
              <el-input type="text" v-model="waterform.waterDiameter" :readonly="isReadonly">
                <template #append> mm </template>
              </el-input>
            </el-form-item>
            <el-form-item label="仪表盘照片">
              <el-upload
                class="avatar-uploader"
                :disabled="isReadonly"
                action="/"
                :on-change="handlechange"
                :show-file-list="false"
                :auto-upload="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="$router.push('/home/waterqualitytype')">返回</el-button>

              <el-button v-if="!isReadonly" type="success" @click="submitForm('form')">修改</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="isReadonly = !isReadonly">{{
                isReadonly ? '允许修改' : '禁止修改'
              }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { getWaterTypeList, updateWaterType } from './../config/api'
// 仪表类型详细
export default {
  data() {
    return {
      isReadonly: true,
      imageUrl: '',
      waterform: {
        waterSupplier: '',
        waterModel: '',
        waterTypeName: '',
        waterMaxMeter: '',
        waterDiameter: '',
        waterImgPath: '', // 返回的图片路径
        waterImg: {} // 修改时的参数
      },
      list: []
    }
  },
  created() {
    this.getAll()
    // console.log(this.$route.query.id)
  },
  methods: {
    getAll() {
      getWaterTypeList().then(res => {
        if (res.code === 200) this.list = res.data
        console.log(res)
        this.list.forEach(el => {
          if (el.waterTypeId === Number(this.$route.query.id)) {
            this.waterform = el
            el.waterImgPath && (this.imageUrl = this.imgUrl + el.waterImgPath)
          }
        })
        // console.log(this.waterform) // 包括了waterTypeId
      })
    },
    handlechange(file) {
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      if (isJPG && isLt2M) {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.waterform.waterImg = file.raw
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let myformData = new FormData()
          let params = {}
          for (let k in this.waterform) {
            if (k !== 'waterImg' && k !== 'waterImgPath') params[k] = this.waterform[k]
          }
          if (this.imageUrl) {
            myformData.append('waterImg', this.waterform['waterImg'])
          }
          // 添加水表类型
          updateWaterType(params, myformData).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.isReadonly = true
              this.$router.push('/home/waterqualitytype')
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style></style>
